<template>
  <div class="travel">
    <img src="../../assets/images/travel.png" alt="">
    <div class="wrapper">
      <div class="title">出行防疫政策查询</div>
<!--      出发地区-->
      <van-field
        v-model="fromValue"
        is-link
        readonly
        label="出发地区"
        placeholder="请选择出发地区"
        @click="from = true"
      />
      <van-popup v-model="from" round position="bottom">
        <van-cascader
          v-model="cascaderValue1"
          title="请选择出发地区"
          :options="options"
          @close="from = false"
          @finish="fromFinish"
        />
      </van-popup>
<!--到达地区-->
      <van-field
        v-model="toValue"
        is-link
        readonly
        label="到达地区"
        placeholder="请选择到达地区"
        @click="to = true"
      />
      <van-popup v-model="to" round position="bottom">
        <van-cascader
          v-model="cascaderValue2"
          title="请选择到达地区"
          :options="options"
          @close="to = false"
          @finish="toFinish"
        />
      </van-popup>
      <div class="button">
        <van-button type="primary" size="large" @click="search">查询</van-button>
      </div>
      <div class="text" v-if="flag">
<!--      <div class="text" >-->
        <div class="title">出{{textFrom}}</div>
        <div class="info">{{fromDesc.out_desc}}</div>
        <div class="title">进{{textTo}}</div>
        <div class="info">{{toDesc.low_in_desc}}</div>
        <div class="title">出{{textTo}}</div>
        <div class="info">{{toDesc.out_desc}}</div>
        <div class="title">进{{textFrom}}</div>
        <div class="info">{{fromDesc.low_in_desc}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api/index'
export default {
  data() {
    return {
      flag:false,
      from: false,
      fromDesc:'',
      toDesc:'',
      to:false,
      f:'',
      t:'',
      textFrom:'',
      textTo:'',
      fromValue: '',
      toValue:'',
      cascaderValue1: '',
      cascaderValue2: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: '浙江省',
          value: '330000',
          children: [{ text: '杭州市', value: '330100' }],
        },
        {
          text: '江苏省',
          value: '320000',
          children: [{ text: '南京市', value: '320100' }],
        },
      ],
    };
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    fromFinish({value, selectedOptions }) {
      this.f=value
     this.textFrom=selectedOptions[1].text
      this.from = false;
      this.fromValue = selectedOptions.map((option) => option.text).join('/');
    },
    toFinish({ value,selectedOptions }) {
      this.t=value
      this.textTo=selectedOptions[1].text
      this.to = false;
      this.toValue = selectedOptions.map((option) => option.text).join('/');
    },
    search(){
      this.flag=true
      api.getPolicyData({
        from:this.f,
        to:this.t
      })
      .then(res=>{
        // console.log(res.data)
        let obj=res.data.data
        this.fromDesc=obj.from_info
        this.toDesc=obj.to_info
      })
    }
  },
  created() {
    api.getCityData()
    .then(res=>{
      console.log('----')
      // console.log(res.data)
      let result=res.data.data;
      let arr=[]
      result.forEach(item=>{
        let obj={}
        obj.text=item.province;//省份名
        obj.value=item.province_id;//省份id
        obj.children=[]
        item.cities.forEach(ele=>{
          let child={}
          child.text=ele.city
          child.value=ele.city_id
          obj.children.push(child)
        })
        arr.push(obj)
      })
      this.options=arr
    })
  }
}
</script>

<style lang="less" scoped>
.travel{
  background-color: #ffd700;
  img{
    width: 100%;
  }
  padding-bottom: 20px;
  .wrapper{
    padding: 20px;
    margin: 30px 20px;
    background-color: #fff;
    .button{
      margin-top: 30px;
    }
    .text{
      .title{
        color: #fff;
        background: rgb(7,193,96);
        margin-top: 10px;
        border-radius: 5px;
        padding: 7px 5px;
      }
      .info{
        background: #eee;
        margin-top: 20px;
        border-radius: 5px;
        padding: 10px 10px;
      }
    }
  }
}
</style>

